<template>
  <div>
    <!-- 添加或修改仪器迁移对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="设备名称" prop="instrumentationId">
          <el-input v-model="form.instrumentationName" disabled  class="input_dialog_w"/>
        </el-form-item>
        <el-form-item label="操作日期" prop="operationTime">
          <el-date-picker clearable size="small" style="width: 320px;"
            v-model="form.operationTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择操作日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="目标机构" prop="targetLabId">
         <treeselect v-model="form.targetLabId" :options="deptOptions" :default-expand-level="2"
         :show-count="true" placeholder="请选择目标机构"  class="input_dialog_w"
           size="small" />
        </el-form-item>
        <el-form-item label="备注说明" prop="comments">
          <el-input type="textarea" :rows="3" v-model="form.comments" placeholder="请输入备注说明" class="input_dialog_w"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addInstrumentShift } from "@/api/labdata/instrumentShift";
import {
    treeselect
  } from "@/api/labdata/orgnization";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "InstrumentShift",
  components: {
    Treeselect
  },
  data() {
    return {
      // 部门树选项
      deptOptions: [],
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        operationTime: [
          { required: true, message: "操作日期不能为空", trigger: "blur" }
        ],
        targetLabId: [
          { required: true, message: "目标机构不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
   this.getTreeselect();
  },
  methods: {
    refresh(){
      this.$emit("reload");
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        shiftId: null,
        operatorId: null,
        operationTime: null,
        targetLabId: null,
        comments: null,
        instrumentationId:null,
        instrumentationName:null
      };
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.reset();
      //,
     this.form.instrumentationId = row.instrumentationId;
     this.form.instrumentationName = row.name;
     this.form.sourceLabId = row.labId;
      //console.log('instrumentation id='+ val+ ',name='+valName);
      this.open = true;
      this.$forceUpdate();
      this.title = "添加仪器迁移";
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
            addInstrumentShift(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.refresh();
            });
          }
      });
    }
  }
};
</script>
<style type="text/css" scoped>
  .input_dialog_w{
        width: 320px;
    }
</style>
